<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>车辆费用统计</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
    <style>
        /*.layui-table-cell {*/
            /*height: auto;*/
            /*line-height: inherit;*/
            /*white-space: pre-wrap*/
        /*}*/
    </style>
</head>
<body class="layui-layout-body">





<blockquote class="layui-elem-quote"  id="ta" >

    <div class=" layui-form" >
        <div class="layui-form-item"  >

            <div class="layui-input-inline" style="width: 100px">

                <label class="layui-form-label">车牌号</label>
            </div>

            <div class="layui-input-inline">

                <select class="layui-input-inline" id="searchCph" lay-search>

                    <option value=""></option>
                </select>
            </div>

            <div class="layui-input-inline" style="width: 100px">
                <label class="layui-form-label">起始日期</label>

            </div>
            <div class="layui-input-inline">
                <input type="text"  class="layui-input" id="searchQsrqContent">

            </div>
            <div class="layui-input-inline" style="width: 100px">

                <label class="layui-form-label">结束日期</label>
            </div>
            <div class="layui-input-inline">

                <input type="text"  class="layui-input" id="searchJsrqContent">
            </div>

            <div class="layui-input-inline " style=" width:10%; position: absolute;right: 10% ">
                <button class="layui-btn layui-btn-normal" id="tongji">统计</button>

            </div>
            <div class="layui-input-inline " style=" width:10%; position: absolute;right: 5% ">
                <button class="layui-btn layui-btn-normal" id="daochu">导出</button>

            </div>
        </div>
    </div>
</blockquote>

<div class="layui-row">
    <div class="layui-col-xs12">
        <table id="table" lay-filter="Table"></table>
    </div>
</div>

<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['form' ,'table','element','laypage','laydate'], function(){
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var currentPage = 1;
        var tableheight= 'full-92';
        var tablewidth =$("#ta").width();
        var laydate = layui.laydate;

        var tablehead = [[
            {type:'numbers', title: '序号',  align:'center',rowspan:2,fixed:'left'}
            ,{field: 'fcrq', title: '日期' ,align:'center',rowspan:2,minWidth:0.064*tablewidth,fixed:'left'}
            ,{field: 'xlmc', title: '线路' ,  align:'center',rowspan:2,minWidth:0.15*tablewidth,fixed:'left'}
            ,{field: 'khjc', title: '客户简称' ,  align:'center',rowspan:2,minWidth:0.0512*tablewidth,fixed:'left'}
            ,{field: 'cph', title: '车牌号' ,align:'center',rowspan:2,minWidth:0.043*tablewidth,fixed:'left'}
            ,{field: 'jsyxm', title: '驾驶员' ,  align:'center',rowspan:2,minWidth:0.044*tablewidth,fixed:'left'}
            ,{field: 'jsysj', title: '驾驶员手机' ,align:'center',rowspan:2,minWidth:0.0594*tablewidth,fixed:'left'}
            ,{field: 'gls', title: '公里数',align:'center',rowspan:2,minWidth:0.046*tablewidth,fixed:'left'}
            ,{field: 'llcyje', title: '理论充油金额',align:'center',rowspan:2,minWidth:0.069*tablewidth}
            ,{field: 'sjcyje', title: '实际充油金额',align:'center',rowspan:2,minWidth:0.069*tablewidth}
            ,{title: '支出项' ,align:'center',colspan:15}
            ,{title: '收入项' ,align:'center',colspan:6}
            ,{field: 'lirun', title: '利润' ,align:'center',rowspan:2}
        ], [
            {field: 'glf', title: '过路费' ,align:'center',minWidth:0.043*tablewidth}
            ,{field: 'zcjy', title: '节油' ,align:'center',minWidth:0.036*tablewidth}
            ,{field: 'xjjy', title: '现金加油' ,align:'center',minWidth:0.0512*tablewidth}
            ,{field: 'buzhu', title: '线路补助' ,align:'center',minWidth:0.0512*tablewidth}
            ,{field: 'maidan', title: '买单' ,align:'center',minWidth:0.036*tablewidth}
            ,{field: 'wxfycn', title: '维修费用(场内)' ,align:'center',minWidth:0.074*tablewidth}
            ,{field: 'wxfycw', title: '维修费用(场外)' ,align:'center',minWidth:0.074*tablewidth}
            ,{field: 'wzfk', title: '违章罚款' ,align:'center',minWidth:0.0512*tablewidth}
            ,{field: 'tcf', title: '停车费' ,align:'center',minWidth:0.044*tablewidth}
            ,{field: 'zsf', title: '住宿费' ,align:'center',minWidth:0.044*tablewidth}
            ,{field: 'zxf', title: '装卸费' ,align:'center',minWidth:0.044*tablewidth}
            ,{field: 'chuanpiao', title: '船票' ,align:'center',minWidth:0.036*tablewidth}
            ,{field: 'sgcl', title: '事故处理' ,align:'center',minWidth:0.0512*tablewidth}
            ,{field: 'peijian', title: '配件' ,align:'center',minWidth:0.036*tablewidth}
            ,{field: 'zcqt', title: '其他支出' ,align:'center',minWidth:0.0512*tablewidth}
            ,{field: 'srcy', title: '超油' ,align:'center',minWidth:0.036*tablewidth}
            ,{field: 'huihuo', title: '回货' ,align:'center',minWidth:0.036*tablewidth}
            ,{field: 'hhbh', title: '回货补货' ,align:'center',minWidth:0.0512*tablewidth}
            ,{field: 'sryk', title: '油卡' ,align:'center',minWidth:0.036*tablewidth}
            ,{field: 'sryf', title: '运费' ,align:'center',minWidth:0.036*tablewidth}
            ,{field: 'srqt', title: '其他收入' ,align:'center',minWidth:0.0512*tablewidth}
        ]
        ]
        //获取url参数 渲染 权限控制的页面
        if(getQueryVariable("STA") == "false"){
            $("#tongji").attr("disabled",true) ;
            $("#tongji").addClass("layui-btn-disabled");
        }
        if(getQueryVariable("OUT") == "false"){
            $("#daochu").attr("disabled",true) ;
            $("#daochu").addClass("layui-btn-disabled");
        }
//渲染车牌号
        $.ajax({
            url: contextPath+"/car",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {
                for(var i in res.list){
                    var option = "<option value='"+ res.list[i].cph+ "'>"+res.list[i].cph+"</option>";
                    $("#searchCph").append(option);
                };
                form.render('select');
            }
        });

        var nowdate = new Date();
        var date = new Date().format("yyyy-MM-dd");
        var preMonth = getPreMonth(date )
        laydate.render({
            elem: '#searchQsrqContent' //指定元素
            ,format:'yyyy-MM-dd'
            ,theme:'#0099FF'
            ,value: preMonth
        });
        laydate.render({
            elem: '#searchJsrqContent' //指定元素
            ,format:'yyyy-MM-dd'
            ,theme:'#0099FF'
            ,value:nowdate
        });
//搜索
        //统计
        $("#tongji").on('click',function(){
            if($("#searchQsrqContent").val() != "" && $("#searchJsrqContent").val() != ""){
                if(!checkEndTime($("#searchQsrqContent").val(),$("#searchJsrqContent").val())){
                    layer.msg("起始日期小于结束日期!");
                }else {
                    var url = contextPath+"/carcost?"+"cph="+ $("#searchCph").val()+"&qsrq="+$("#searchQsrqContent").val()+"&"+"jsrq="+$("#searchJsrqContent").val();
                    console.log(url);
                    $.ajax({
                        url: url  ,
                        type: "GET",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            table.render({
                                elem: '#table'
                                ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                                ,data:res.list

                                ,page: {
                                    curr: 1 //重新从第 1 页开始
                                    ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                                ,limit:10
                                ,cellMinWidth: tablewidth
                                , cols: tablehead
                            });
                        }
                    });
                }
            }else if($("#searchQsrqContent").val() != "" && $("#searchJsrqContent").val() == ""){
                layer.msg("结束日期不能为空！");
            }else if($("#searchQsrqContent").val() == "" && $("#searchJsrqContent").val() != ""){
                layer.msg("起始日期不能为空！");
            }
        });




//导出
        $('#daochu').click(function () {
            window.location.href= contextPath+"/carexcel?"+"cph="+ $("#searchCph").val()+"&qsrq="+$("#searchQsrqContent").val()+"&"+"jsrq="+$("#searchJsrqContent").val();

        });
        //table实例

        var url = contextPath+"/carcost?"+"cph="+ $("#searchCph").val()+"&qsrq="+preMonth +"&"+"jsrq="+getFormatDate() ;
        console.log(url);
        $.ajax({
            url: url,
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {

                table.render({
                    elem: '#table'
                    ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                    ,data:res.list
                    ,page: {
                        curr: currentPage //重新从第 1 页开始
                        ,layout:['prev', 'page', 'next','skip','count']
                    } //开启分页
                    ,limit:10
                   , cols:  tablehead
                    ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currentPage = curr;
                    }
                });
            }

        });




    });





</script>
</body>
</html>